# /frontend/Dockerfile

# --- 第一阶段：构建阶段 (命名为 builder) ---
# 使用一个包含 Node.js 环境的官方镜像，来编译和打包我们的 Vue 项目。
FROM node:lts-alpine AS builder

# 设置此阶段在容器内的工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json 文件
# 先复制这两个文件并安装依赖，是为了利用 Docker 的缓存机制，
# 如果依赖没有变化，后续重新构建时可以跳过 npm install，加快速度。
COPY package*.json ./

# 安装所有依赖
RUN npm install

# 复制我们项目的所有源代码
COPY . .

# 执行打包命令，Vite/Vue CLI 会将项目打包到 /dist 文件夹
RUN npm run build


# --- 第二阶段：生产阶段 ---
# 使用一个非常轻量级的 Nginx 官方镜像作为我们最终的运行环境。
FROM nginx:stable-alpine

# 将第一阶段(builder)中，打包好的 /app/dist 文件夹里的所有内容，
# 复制到当前 Nginx 镜像的默认网站根目录 /usr/share/nginx/html 下。
COPY --from=builder /app/dist /usr/share/nginx/html

# 将我们自己编写的 nginx.conf 配置文件，
# 复制并覆盖掉 Nginx 镜像中默认的配置文件。
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 声明容器将暴露 80 端口
EXPOSE 80

# 容器启动时，以非后台模式启动 Nginx 服务。
CMD ["nginx", "-g", "daemon off;"]